<template>
  <div id="doAnswerPage">
    <a-card>
      <h1>{{ app.appName }}</h1>
      <p>{{ app.appDesc }}</p>
      <h2 style="margin-bottom: 32px">{{ current }}、{{ currentQuestion?.title }}</h2>
      <div>
        <a-radio-group direction="vertical" v-model="currentAnswer" :options="questionOptions" @change="doRadioChange"/>
      </div>
      <div style="margin-top: 24px">
        <a-space size="large">
          <a-button v-if="current > 1" circle @click="current -= 1">
            上一题
          </a-button>
          <a-button
              type="primary"
              v-if="current === questionContent.length"
              circle
              :disabled="!currentAnswer"
              :loading="submitting"
              @click="doSubmit"
          >
            {{ submitting ? "评分中" : "查看结果" }}
          </a-button>
          <a-button
              type="primary"
              circle
              v-if="current < questionContent.length"
              :disabled="!currentAnswer"
              @click="current += 1"
          >
            下一题
          </a-button>
        </a-space>
      </div>

    </a-card>
  </div>
</template>

<script setup lang="ts">
import {withDefaults, defineProps, ref, watchEffect, computed, reactive} from "vue";
import message from "@arco-design/web-vue/es/message";
import API from "@/api";
import {useRouter} from "vue-router";
import {listQuestionVoByPageUsingPost} from "@/api/questionController";
import {getAppVoByIdUsingGet} from "@/api/appController";
import {addUserAnswerUsingPost,generateUserAnswerIdUsingGet} from "@/api/userAnswerController";

interface Props {
  appId: string;
}

const props = withDefaults(defineProps<Props>(), {
  appId: () => {
    return "";
  }
});

const router = useRouter();

const app = ref<API.AppVO>({});
/**
 * 题目内容结构(题目列表)
 */
const questionContent = ref<API.QuestionContentDTO[]>([])

// 当前题目序号（从1开始）
const current = ref(1);

// 当前题目
const currentQuestion = ref<API.QuestionContentDTO>({});

//当前题目选项
const questionOptions = computed(() => {
  return currentQuestion.value?.options ?
      currentQuestion.value.options.map((option) => {
        return {
          label: `${option.key}. ${option.value}`,
          value: option.key
        };
      }) : [];
});

// 当前答案
const currentAnswer = ref<string>();

// 回答列表
const answerList = reactive<string[]>([]);

const submitting = ref(false);

// 唯一id
const id = ref<number>();

// 生成唯一id
const generateId = async () => {
  const res = await generateUserAnswerIdUsingGet();
  if (res.data.code === 0) {
    id.value = res.data.data as any;
  } else {
    message.error("获取唯一id失败，" + res.data.message);
  }
};

// 进入页面时，生成唯一id
watchEffect(() => {
  generateId();
});

/**
 * 加载数据
 */
const loadData = async () => {
  if (!props.appId) {
    return;
  }
  // 获取app
  let res: any = await getAppVoByIdUsingGet({
    id: props.appId as any
  });
  if (res.data.code === 0) {
    app.value = res.data.data as any;
  } else {
    message.error("获取应用失败，" + res.data.message);
  }

  // 获取题目
  res = await listQuestionVoByPageUsingPost({
    appId: props.appId as any,
    current: 1,
    pageSize: 1,
    sortOrder: "descend",
    sortField: "createTime"
  });
  if (res.data.code === 0 && res.data.data?.records) {
    questionContent.value = res.data.data?.records[0].questionContent;
  } else {
    message.error("获取题目失败，" + res.data.message);
  }
};

/**
 * 选择选项后，保存选项记录
 * @param value
 */
const doRadioChange = (value: string) => {
  currentAnswer.value = value;
  answerList[current.value - 1] = value;
}

/**
 * 提交表单
 * @param data
 */
const doSubmit = async () => {
  if (!props.appId || !answerList) {
    return;
  }
  submitting.value = true;
  const res = await addUserAnswerUsingPost({
    appId: props.appId as any,
    choices: answerList,
    id: id.value as any
  });
  if (res.data.code === 0 && res.data.data) {
    router.push(`/answer/result/${res.data.data}`);
  } else {
    message.error("提交答案失败，" + res.data.message);
  }
  submitting.value = false;
};

// 获取旧数据
watchEffect(() => {
  loadData();
});

watchEffect(() => {
  // 改变current题号后，会自动更新当前题目和答案
  currentQuestion.value = questionContent.value[current.value - 1];
  currentAnswer.value = answerList[current.value - 1];
})
</script>

<style scoped>
#doAnswerPage {
}
</style>
